<template>
  <div class="systemManage">
    <h-header></h-header>
    <div class="content">
      <sidebarM></sidebarM>
      <div class="main-content">
        <div class="search_h clearfix">
          <p>
            <a href="#" onClick="javascript:history.back(-1)">用户管理</a>
          </p>
        </div>
        <div>
          <div class="search_c">
            <p class="billlist">
              <span>姓名：
                <input type="text" v-model="username">
              </span>
              <span>
                机构：
                <select name class="selectC" v-model="userjigou">
                  <option value="" selected style="display:none;">请选择</option>
                  <option
                    v-for="item in jigouList"
                    :key="item.id"
                    :value="item.hash.orgid"
                  >{{(item.hash.orgname).replace(/;/g, "&nbsp;")}}</option>
                </select>
              </span>
              <span>电话：
                <input type="text" v-model="usertel">
              </span>
            </p>
            <div class="search" @click="getUserList('1')">搜索</div>
          </div>
          <div class="cont">
            <div class="btn-group">
              <span class="btn" @click="goAddUser">添加新用户</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>工号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>邮箱</th>
                  <th>电话</th>
                  <th>所在机构</th>
                  <th>角色</th>
                  <th width="320px">状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pages[num-1]" :key="item.id">
                  <td>{{item.hash.userid}}</td>
                  <td>{{item.hash.username}}</td>
                  <td>{{item.hash.sex}}</td>
                  <td>{{item.hash.age}}</td>
                  <td>{{item.hash.email}}</td>
                  <td>{{item.hash.telephone}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>{{item.hash.rname}}</td>
                  <td>
                    <span @click="modifyUserInfo(item.hash.pid)">修改信息</span>
                    <span @click="viewUserInfo(item.hash.pid)">查看员工</span>
                    <!-- <span @click="Resetpsw(item.hash.pid)">初始化密码</span> -->
                    <el-button type="text" @click="deleteUserItem(index,item.hash.pid)">删除</el-button>
                    <span @click="changeUserRole(item.hash.pid)">角色</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="pagination-wrapper">
              <pagination
                :groups="groups"
                :pages="pages"
                :current.sync="group"
                @navpage="pageListView"
                @navgroup="groupListView"
                ref="pagi"
              ></pagination>
              <div class="desc">
                <span>当前是第
                  <i v-text="num"></i>页，共
                  <i v-text="pages.length"></i>页
                </span>
              </div>
            </div>
          </div>
          <el-dialog title="用户管理" :visible.sync="dialogTableVisible" width="85%">
            <div class="addInfo">
              <div class="title">用户信息</div>
              <table width="95%">
                <tbody>
                  <tr>
                    <td>工号:</td>
                    <td>
                      <input type="text" v-model="newUserId" :disabled="isshowgh">
                    </td>
                    <td>员工姓名:</td>
                    <td>
                      <input type="text" v-model="newUserName">
                    </td>
                  </tr>
                  <tr>
                    <td>性别:</td>
                    <td>
                      <input type="radio" id="one" value="男" :checked="male"
                        v-model="newUserSex"
                      >
                      <label for="one">男</label>
                      <input type="radio" id="two" value="女" :checked="female"
                        v-model="newUserSex"
                      >
                      <label for="two">女</label>
                    </td>
                    <td>年龄:</td>
                    <td>
                      <input type="text" v-model="newUserAge">
                    </td>
                  </tr>
                  <tr>
                    <td>所在机构:</td>
                    <td>
                      <select v-model="newUserJigou">
                        <option
                          v-for="item in jigouList"
                          :key="item.id"
                          :value="item.hash.orgid"
                        >{{(item.hash.orgname).replace(/;/g, "&nbsp;")}}</option>
                      </select>
                    </td>
                    <td>职务:</td>
                    <td>
                      <input type="text" v-model="newUserPosition">
                    </td>
                  </tr>
                  <tr>
                    <td>邮箱:</td>
                    <td>
                      <input type="text" v-model="newUserEmail">
                    </td>
                    <td>电话:</td>
                    <td>
                      <input type="text" v-model="newUserTel">
                    </td>
                  </tr>
                  <tr>
                    <td>设置密码:</td>
                    <td colspan="3">
                      <input type="text" v-model="newUserPwd">(密码必须由字母和数字组合，且不得小于6位数！)
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" @click="addNewUser" v-show="showSubmit">
                      <span>提交</span>
                    </td>
                    <td colspan="4" @click="modifyUserSubmit(nowPid)" v-show="showXiugaiSubmit">
                      <span>提交</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-dialog>
          <el-dialog :visible.sync="dialogTableVisible2" width="85%" title="用户管理">
            <div class="show-role">
              <div class="title">修改用户角色</div>
              <div class="title">您修改的是【{{newUserName}}】的使用权限!</div>
              <div class="list">
                <span v-for="(item, index) in userRoleList" :key="item.id">
                  <input type="checkbox" :id="index" :value="item.hash.rid" v-model="RoleRids">
                  <label :for="index">{{item.hash.rname}}</label>
                </span>
              </div>
              <el-button type="primary" @click="submitUserRole(nowPid)">修改</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from '~/components/common/pagination/pagination';
import HHeader from '~/components/common/header/Mheader';
import sidebarM from '~/components/common/sidebar/sidebarM';


export default {
  data() {
    return {
      isshowgh: true,
      dialogTableVisible: false,
      dialogTableVisible2: false,
      sideMenu: [],
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      ts: this.newStore(),
      // 分页相关
      group: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据
      // 用户管理相关
      userList: [], // 用户列表
      oneUserInfo: [], // 一条信息
      jigouList: [], // 机构信息
      userRoleList: [], // 用户角色信息
      showUser: true,

      showUserRole: false,
      checkedRid: [],
      check: '',
      rolerid: '',
      newUserId: '',
      newUserName: '',
      newUserSex: '',
      newUserAge: '',
      newUserJigou: '',
      newUserPosition: '',
      newUserEmail: '',
      newUserTel: '',
      newUserPwd: '',
      nowPid: '', // 用户当前pid
      showSubmit: false, // 显示提交按钮
      showXiugaiSubmit: false, // 显示提交修改按钮

      username: '',
      userjigou: '',
      usertel: '',
      // 控制增加修改提交按钮
      showFirstJigouSubmit: false,
      showSecondJigouSubmit: false,
      showmodifyJigouSubmit: false,
      showArea: true,
      showAddarea: false,
      showAddareaMore: false,
      newFirstJigou: '',

    };
  },
  created() {
    // this.getSidemenu();
    this.getjigouList();
    this.getUserList(1);
  },
  computed: {
    // 用户修改
    male() {
      return this.newUserSex == '男';
    },
    female() {
      return this.newUserSex == '女';
    },
    // 计算页数
    pages() {
      const pages = [];
      this.userList.forEach((item, index) => {
        const page = Math.floor(index / 10);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
    // 计算总分组
    groups() {
      return Math.ceil(this.total / this.limit);
    },
  },
  components: {
    HHeader,
    pagination,
    sidebarM,
  },
  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: this.$route.query.funcid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    Resetpsw(id) {
      this.$confirm('确认重置密码为：qwe123？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning', // 之上是页面东西，之下是逻辑。
      }).then(() => {
        const res = {
          handle:
            '67A5B6FEF17D97DEE5FB3EC2509558B247AC617D3BB5FD096BD83B5A66A2B897', // 接口
          token: localStorage.getItem('token'), // 发送方式
          pid: id,
        };
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '重置成功',
          });
          this.getUserList(this.group);
        });
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    getjigouList() {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouList = ts.d.data.operation2;
        console.log(this.jigouList);
        this.newUserJigou = (this.jigouList[0].hash.orgname).replace(/;/g, '');
      });
    },
    // 分页相关
    // 点击页码，根据当前页获取数据
    pageListView(page) {
      this.num = page;
    },
    // 获取分组信息
    groupListView(msg) {
      this.group = msg.curgroup;
      this.num = msg.curpage;
      this.getUserList(this.group);
    },


    // 用户管理
    // 点击角色
    changeUserRole(pid) {
      // 获取该条信息
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        console.log(this.oneUserInfo);
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.getUserRoleList(pid);
      });

      // 转到角色选择页

      this.dialogTableVisible2 = true;
    },
    submitUserRole(pid) {
      this.$confirm('确认修改?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEE5FB3EC2509558B2BF20AB417E7157D029DABAF7F819C4A4',
          token: localStorage.getItem('token'),
          pid,
          rid: this.RoleRids,
        };
        console.log(this.RoleRids);
        // return;
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'info',
            message: '修改成功!',
          });
          this.dialogTableVisible2 = false;
          this.getUserList(this.group);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改',
        });
        this.dialogTableVisible2 = true;
      });
    },
    // 删除
    deleteUserItem(index, pid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B634939C64B2C857641',
          token: localStorage.getItem('token'),
          pid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'info',
            message: '删除成功!',
          });
          this.getUserList('1');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 提交新增用户
    addNewUser() {
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2372E1BF234D80FD9',
        token: localStorage.getItem('token'),
        userid: this.newUserId,
        cardid: '',
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        passwords: this.newUserPwd,
        fax: '',
        position: this.newUserPosition,
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!',
        });
        this.getUserList(this.group);
        this.newUserPwd = '';
      });
      this.$nextTick(() => {
        this.goBackUser();
        this.dialogTableVisible = false;
      });
    },
    // 点击修改用户信息选项
    modifyUserInfo(pid) {
      this.isshowgh = true;
      this.showSubmit = false;
      this.showXiugaiSubmit = true;
      // 渲染单条信息
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        console.log(this.oneUserInfo);
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.newUserTel = item.telephone;
        this.newUserJigou = item.dept;

        this.newUserPosition = item.position;
        this.nowPid = item.pid;

        this.showUser = false;
        this.showUserRole = false;
        this.showAdduser = true;

        this.dialogTableVisible = true;
      });
    },
    // 查看
    viewUserInfo(pid) {
      this.showSubmit = false;
      this.showXiugaiSubmit = false;

      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        console.log(this.oneUserInfo);
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.newUserTel = item.telephone;
        this.newUserJigou = item.dept;

        this.newUserPosition = item.position;
        // this.newUserPwd = item.cardid;
        this.nowPid = item.pid;

        this.showUser = false;
        this.showUserRole = false;
        this.showAdduser = true;

        this.dialogTableVisible = true;
      });
    },
    // 提交修改用户信息
    modifyUserSubmit(pid) {
      // if (this.newUserPwd.length < 1) {
      //   alert('请填写用户密码！');
      //   return;
      // }
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B240E22335DEB9DA4F',
        token: localStorage.getItem('token'),
        pid,
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        passwords: this.newUserPwd,
        passwords1: this.newUserPwd,
        fax: 'tt',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功!',
        });
        this.getUserList(this.group);
        this.newUserPwd = '';
      });
      this.goBackUser();
      this.dialogTableVisible = false;
    },


    // 获取用户列表(有筛选条件)
    getUserList(currentGroup) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B22FB6B751D0360763',
        token: localStorage.getItem('token'),
        username: this.username,
        telephone: this.usertel,
        dept: this.userjigou,
        limit: this.limit,
        start: `${currentGroup}`,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userList = ts.d.data.operation1;
        this.total = ts.d.data.operation2[0].hash.allrs;
      });
    },

    // 获取用户角色
    getUserRoleList(pid) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B29019D3CEB065EB73',
        token: localStorage.getItem('token'),
        pid,
      };
      this.nowPid = pid;
      this.RoleRids = [];
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userRoleList = ts.d.data.operation1;
        for (const i of this.userRoleList) {
          if (i.hash.pid.length > 0) {
            this.RoleRids.push(i.hash.rid);
          }
        }

        console.log(this.userRoleList);
      });
    },
    // 显示用户页
    goBackUser() {
      this.showAdduser = false;
      this.showUserRole = false;
      this.showUser = true;
    },
    // 显示添加/修改用户页
    goAddUser() {
      this.isshowgh = false;
      this.showUser = false;
      this.showUserRole = false;
      this.showAdduser = true;
      this.showSubmit = true;
      this.showXiugaiSubmit = false;
      this.dialogTableVisible = true;
    },
    // 显示到用户角色页
    goShowUserRole() {
      this.showUser = false;
      this.showUserRole = true;
      this.showAdduser = false;
    },


  },

};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
table >>> .el-button--text {
  color: #00f;
  padding: 0 5px 0 0;
  border-radius: 0;
  border-right: 1px solid #999;
}

table >>> .el-message--success {
  color: #00f;
}

// table >>> .el-button--text
// border-right: none;
.show-role >>> .el-button {
  padding: 5px 15px;
}

.show-role >>> .el-button--primary {
  background: #69f;
  border-color: #69f;
}

.systemManage {
  width: 100%;

  .content {
    display: flex;
    width: 100%;
    min-height: 600px;

    .sidebar {
      flex: 0 0 200px;
      width: 200px;
      background: #F2F2F2;
      border-right: 1px solid #ccc;

      .main-title {
        flex: 1;
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-bottom: 2px solid #fff;
        color: #13227A;
        font-size: 0;

        .iconfont {
          display: inline-block;
          margin-right: 15px;
          font-size: 20px;
          text-indent: 1em;
        }

        .text {
          display: inline-block;
          font-weight: 600;
        }
      }

      .menu {
        display: block;
        width: 100%;
        text-indent: 2em;
        cursor: pointer;
        background: #ffffff;

        .title {
          height: 48px;
          line-height: 48px;
          border-bottom: 1px solid #ccc;
          padding-left: 10px;

          &.choosed {
            background: #ccc;
            color: #333;
          }
        }
      }
    }

    .main-content {
      flex: 1;
      min-height: 780px;

      .search_h {
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        background: #f2f2f2;
        border-bottom: 2px solid #fff;

        p {
          float: left;
          font-size: 16px;

          a {
            color: #69f;
          }

          span {
            font-size: 14px;
            padding-left: 15px;
          }
        }
      }

      .search_c {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid #f1f1f1;

        .billlist {
          margin-bottom: 30px;

          span {
            display: inline-block;
            font-size: 14px;
            width: 30%;
            min-width: 100px;

            &:first-child {
              padding-left: 20px;
            }

            .selectC {
              box-sizing: content-box;
              width: 190px;
              padding: 8px 5px;
              border-radius: 2px;
              box-shadow: 0 0 5px #ccc;
              font-size: 14px;
              color: #333;
            }

            input {
              box-sizing: content-box;
              width: 190px;
              padding: 7px 5px;
              margin-left: 5px;
              border-radius: 2px;
              border: 1px solid #ccc;
              color: #333;
            }
          }
        }

        .search {
          margin: 0 auto;
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          background-color: #69f;
          color: #fff;
          border-radius: 5px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .cont {
        padding-left: 30px;

        .btn-group {
          margin: 10px 0;

          .btn {
            display: inline-block;
            padding: 10px;
            margin-right: 15px;
            text-align: center;
            font-size: 14px;
            background-color: #69f;
            color: #fff;
            font-weight: 400;
            cursor: pointer;
          }

          .text {
            select {
              min-width: 100px;
              height: 30px;
              border: 1px solid #ccc;
            }
          }
        }

        table {
          text-align: center;
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          td, th {
            border: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            height: 40px;
          }

          thead {
            th {
              font-weight: 600;
              background-color: #F2F2F2;
            }
          }

          tbody {
            td {
              span {
                display: inline-block;
                vertical-align: middle;
                margin: 0 5px;
                padding-right: 5px;
                border-right: 1px solid #999;
                color: blue;

                &:last-child {
                  border-right: none;
                }
              }
            }
          }
        }

        .pagination-wrapper {
          height: 60px;
          line-height: 60px;
          text-align: center;

          .desc {
            margin-left: 50px;
            display: inline-block;
            font-size: 14px;

            span {
              color: #666;

              i {
                padding: 0 3px;
                font-size: 16px;
                color: #25a4bb;
              }
            }
          }
        }
      }

      .addInfo {
        padding: 0 30px;

        .title {
          padding: 15px 0;
          font-size: 16px;

          span {
            color: #69f;
            cursor: pointer;
          }
        }

        table {
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          tbody {
            tr {
              td {
                border: 1px solid #ccc;
                font-size: 14px;
                color: #666;
                height: 40px;
                padding: 0 15px;

                &:nth-of-type(odd) {
                  text-align: right;
                }

                input:not([type='radio']):not([type='checkbox']) {
                  width: 300px;
                  height: 30px;
                  border: 1px solid #ccc;
                }

                select {
                  width: 200px;
                  height: 30px;
                  border: 1px solid #ccc;
                }

                label {
                  display: inline-block;
                  padding: 0 15px 0 5px;
                }

                checkbox {
                  display: inline-block;
                  vertical-align: top;
                }
              }

              &:last-child {
                td {
                  text-align: center;

                  span {
                    padding: 5px 15px;
                    font-size: 14px;
                    background-color: #69f;
                    color: #fff;
                    border-radius: 5px;
                    font-weight: 400;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }

      .show-role {
        padding: 0 30px;

        .title {
          padding: 15px 0;
          font-size: 16px;

          span {
            color: #69f;
            cursor: pointer;
          }
        }

        .list {
          margin-bottom: 15px;

          span {
            margin-right: 15px;
          }
        }
      }
    }
  }
}
</style>

